<template>
  <div v-if="hasPermission">
    <slot></slot>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import useUserStore from '@/store/modules/user'
import { checkPermi, checkRole } from '@/utils/permission'

const props = defineProps({
  // 权限标识
  permission: {
    type: [String, Array],
    required: false
  },
  // 角色标识
  role: {
    type: [String, Array], 
    required: false
  },
  // 权限模式：all-必须拥有全部权限，any-拥有任一权限即可
  mode: {
    type: String,
    default: 'any',
    validator: (value) => ['all', 'any'].includes(value)
  }
})

const userStore = useUserStore()

// 计算是否有权限
const hasPermission = computed(() => {
  const { permission, role, mode } = props
  
  // 超级管理员拥有所有权限
  if (userStore.roles && userStore.roles.includes('admin')) {
    return true
  }
  
  // 检查权限
  if (permission) {
    const permissions = Array.isArray(permission) ? permission : [permission]
    
    if (mode === 'all') {
      // 必须拥有全部权限
      return permissions.every(perm => checkPermi([perm]))
    } else {
      // 拥有任一权限即可
      return permissions.some(perm => checkPermi([perm]))
    }
  }
  
  // 检查角色
  if (role) {
    const roles = Array.isArray(role) ? role : [role]
    
    if (mode === 'all') {
      // 必须拥有全部角色
      return roles.every(r => checkRole([r]))
    } else {
      // 拥有任一角色即可
      return roles.some(r => checkRole([r]))
    }
  }
  
  // 没有权限或角色限制，默认显示
  return true
})
</script>

<style scoped>
/* 可以添加一些样式 */
</style> 